<template>
	<!-- 操作栏 -->
	<el-input placeholder="请输入角色名称" v-model="inpRole" :value="inpRole" @keyup.enter="searchRoles"></el-input>
	<el-button class="searchBtn" type='info' :icon="Search" @click="searchRoles">搜索</el-button>
	<el-button class="addBtn" type='info' :icon="CirclePlus" @click="AddRole">添加</el-button>
	<!-- 表格 -->
	<!-- 表格 -->
	<el-table :data='tableData' style="height: 60vh;">
		<el-table-column label="序号"  align="center">
			<template #default="scope">
				0{{ scope.$index+1 }}
			</template>
		</el-table-column>
		<el-table-column label="角色名称" prop="roleName"  align="center"></el-table-column>
		<el-table-column label="操作"  align="center">
			<template #default="scope">
				<!-- <span style="color: #77b24c; margin:0 10px; cursor: pointer;" @click="update(scope.row)">修改</span> -->
				<span style="color:#ff0000;margin:0 10px; cursor: pointer;" @click="del(scope.row.roleId)">删除</span>
			</template>
		</el-table-column>
	</el-table>
	<el-pagination
		layout="prev,pager,next"
		:page-size="pageSize"
		:page-count="pageCount"
		v-model:current-page="pageIndex"	
		@current-change="changePage"
	></el-pagination>
	<!-- 添加 -->
	<el-dialog title="请添加新的角色" center v-model="addFlag" width="30%">
		<div class="FormBox">
			<el-form :model="formData" :rules="rules" ref="myForm" :hide-required-asterisk="true">
				<el-form-item label="角色:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" prop="roleName" >
					<el-input placeholder="请输入新的角色名称" v-model="formData.roleName"></el-input>
				</el-form-item>
				<el-form-item label="上级角色:" prop="roleName">
					<el-select v-model="Rolenames" placeholder="请选择">
						<el-option label="无" value=0></el-option>
						<el-option
							v-for="item in AllRolesData"
							:key="item.roleId"
							:label="item.roleName"
							:value="item.roleId">
					</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer ">
				<el-button  style="background-color:#106ab1 ; color: white;" @click="confirmAdd(myForm)">确 定</el-button>
				<el-button style="background-color: #999999; color:white" @click="cancel">取 消</el-button>
			</span>
		</div>
	</el-dialog>
	<!-- 修改 -->
	<!-- <el-dialog title="请修改当前角色信息" center v-model="updateFlag" width="30%">
		<div class="FormBox">
			<el-form :model="formData" :rules="rules" ref="myForm" :hide-required-asterisk="true">
				<el-form-item label="角色:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" prop="roleName" >
					<el-input placeholder="请输入新的角色名称" v-model="formData.roleName"></el-input>
				</el-form-item>
				<el-form-item label="上级角色:" prop="roleName">
					<el-select v-model="Rolenames" placeholder="请选择">
						<el-option label="无" value=0></el-option>
						<el-option
							v-for="item in AllRolesData"
							:key="item.roleId"
							:label="item.roleName"
							:value="item.roleId">
					</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer ">
				<el-button  style="background-color:#106ab1 ; color: white;" @click="confirmAddforUpdate(myForm)">确 定</el-button>
				<el-button style="background-color: #999999; color:white" @click="cancel">取 消</el-button>
			</span>
		</div>
	</el-dialog> -->
	<!-- 删除 -->
	<el-dialog v-model="delFlag" width="30%">
		<div class="FormBox">
			<b style="margin-bottom: 10%;">确认删除该角色？</b>
			<span slot="footer" class="dialog-footer">
				<el-button @click="delOk" style="background-color:#106ab1; color: white;">确 定</el-button>
				<el-button @click="cancel" >取 消</el-button>
			</span>
		</div>
	</el-dialog>
</template>

<script setup lang="ts">
	// el组件
	import { ElMessage} from 'element-plus';
	import {Search,CirclePlus} from '@element-plus/icons-vue'
	// 接口
	import {AllRolesList,findRoleByName,addRoles,RolesList,delRoles,updateRoles} from "../api/wqj/index";
	// ref等相关
	import { ref,shallowRef,reactive ,onMounted} from 'vue';
	// 类型注解
	import { formType } from '../modal/wqj/user';
	// 页面自定义变量
	let inpRole=ref<string>("")//搜索角色名称
	let pageSize:any='5';//每页显示4条数据
	let pageIndex=ref<string>('1');//当前显示第0页
	let tableData=ref([]);//表格数据
	let pageCount=shallowRef<number>(0)//总页数
	let addFlag=ref<boolean>(false)//添加模态窗弹出
	let Rolenames=ref([])
	let AllRolesData:any=[]//所有权限
	let updateFlag=ref(false)//修改模态窗的弹出
	let myForm=ref(null)
	let delroleId=ref('')//删除的id
	let delFlag=ref<boolean>(false)//删除模态窗弹出
	let newRoleId=ref<number>()
	let formData=reactive<formType>({
		roleName:"",
	})
	// 验证规则
	let rules=reactive({
		roleName:[{
			required:true,
			message:"角色名不为空",
			trigger:"blur",
		}]
	})
	// 查询角色权限接口
	const showRoles=async()=>{
		let res=await AllRolesList({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
		})
		tableData.value=res.list
		pageCount.value=res.num
		// console.log("角色列表",tableData.value)
	}
	// 搜索--接口
	const searchUserRoles=async()=>{
		let res=await findRoleByName({
			roleName:inpRole.value,
			pageIndex:pageIndex.value,
			pageSize:pageSize
		})
		tableData.value=res.list
		pageCount.value=res.num
		console.log("搜索结果",res)
	}
	// enter|单击搜索
	const searchRoles=()=>{
		pageIndex.value='1'
		searchUserRoles()
	}
	// 切页
	const changePage=(page:string)=>{
		pageIndex.value=String(page);
		if(inpRole.value==''){
			showRoles()
		}
	}	
	// 所有权限--下拉框
	const showAllRoles=async()=>{
		let res=await RolesList({
			status:1
		})
		AllRolesData=res
		// console.log("权限",AllRolesData)
	}
	showAllRoles()
	// 添加--弹出
	const AddRole=()=>{
		addFlag.value=true
	}
	// 确认添加
	const confirmAdd=(formEL)=>{
		if(Rolenames.value.length==0){//未选择角色
			ElMessage.error("请填写完整信息")
		}else{
			// console.log("formEl",formEL)
			formEL.validate(async(valid)=>{
				if(valid){
					let res = await addRoles({
						parentRole:Number(Rolenames.value),
						roleName:formData.roleName
					})
					// console.log("添加",res)
					if(res==undefined){
						ElMessage.success("添加成功")
						showRoles()
						addFlag.value=false
					}else{
						ElMessage.error(res.msg)
					}
				}
			})
		}
	}
	// 修改--弹窗
	// const update=(item)=>{
	// 	updateFlag.value=true
	// 	// console.log("本行的信息",item)
	// 	formData.roleName=item.roleName
	// 	newRoleId.value=item.roleId
	// 	if(item.parentRole==0){
	// 		Rolenames.value='无'
	// 	}else{
	// 		Rolenames.value=item.parentRole
	// 	}		
	// }
	// 点击确认修改
	// const confirmAddforUpdate=(formEL)=>{
	// 	if(Rolenames.value.length==0){//未选择角色
	// 		ElMessage.error("请填写完整信息")
	// 	}else{
	// 		// console.log("formEl",formEL)
	// 		formEL.validate(async(valid)=>{
	// 			if(valid){
	// 				let res = await updateRoles({
	// 					// parentRole:Number(Rolenames.value),
	// 					roleName:formData.roleName,
	// 					roleId:Number(newRoleId)
	// 				})
	// 				console.log("修改",res)
	// 				if(res==undefined){
	// 					ElMessage.success("修改成功")
	// 					showRoles()
	// 					updateFlag.value=false
	// 				}else{
	// 					ElMessage.error(res.msg)
	// 				}
	// 			}
	// 		})
	// 	}
	// }
	// 删除
	const del=(item)=>{
		// console.log("删除",item)
		delFlag.value=true
		delroleId.value=item
	}
	// 确认删除
	const delOk=async()=>{
		let res=await delRoles({
			roleId:delroleId.value
		})
		if(res==undefined){
			ElMessage.success("角色删除成功")
			showRoles()
			delFlag.value=false
		}
	}
	// 取消
	const cancel=()=>{
		formData.roleName=""
		Rolenames.value=[0]
		addFlag.value=false
		delFlag.value=false
	}
	onMounted(()=>{
		showRoles()
	})
</script>

<style scoped lang="less">
	.el-input{
		width: 205px;
		margin-right: 10px;
		border: none;
	}
	.searchBtn{
		background-color: #106ab1;
		border: none;
	}
	.addBtn{
		background-color: #00a0e9;
		border: none;
		float: right;
		margin-right: 20px;
	}
	.el-table{
		margin-top: 20px;
	}
	.el-table{
		--el-table-border-color:none;
		--el-table-borde:none;
		--el-table-bg-color:none !important;    
		--el-table-header-bg-color:#f3f8fd;
		--el-table-header-text-color:#333 !important
	}
	/* 表格间隙 */
	:deep(.el-table__body) {
	  -webkit-border-vertical-spacing: 9px;
	}
	/* 分页样式 */
	.el-pagination{
		--el-pagination-bg-color:none;
		--el-pagination-button-disabled-bg-color:none;
		justify-content: center;
	}
	/* 表单样式 */
	.FormBox{
		width:100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		padding: 10% 0;
		.el-form{
			width:100%;
			height:30vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			.el-form-item{
				width: 90%;
				.el-input{
					width:100%;
					height: 5vh;
				}
				.el-select{
					width:96%;
					height: 5vh;
					.el-option{
						width:100%;
					}
				}
			}
		}
		.dialog-footer{
			width: 100%;
			display: flex;
			justify-content: center;
			// .el-button{
			// 	width:30%
			// }
		}
	}
</style>